<script setup lang="ts">
import { computed, onMounted, reactive } from 'vue';

const props: any = defineProps<{
    ujt: any;
    id?: any;
}>();
const { $global, $model } = props.ujt;

if ($global.pop[props.id]?.noresize == undefined) {
    $global.pop[props.id].noresize = 1;
}
const pDomWH: any = reactive({ w: 0, h: 0 });

onMounted(() => {
    if (!$global.pop[props.id].full) {
        // 正常父级模式
        const areaDom =
            document.getElementById('poparea' + props.id) ||
            document.getElementById('popmask' + props.id) ||
            document.getElementById($global.sys.zoomid) ||
            document.getElementById('asaizoomarea');
        if (areaDom) {
            pDomWH.w = areaDom?.offsetWidth;
            pDomWH.h = areaDom?.offsetHeight;
        }
    }
});

const cmMainstyle = computed(() => {
    let tmpStyle: any = $global.pop[props.id]?.popstyle || {};
    tmpStyle = {
        width: $global.pop[props.id]?.width || '380px',
        height: $global.pop[props.id]?.height || 'auto',
        zIndex: $global.pop[props.id].zindex + 1,
        ...tmpStyle,
    };
    if (!$global.pop[props.id]?.nooverflow) {
        tmpStyle.overflow = $global.pop[props.id]?.boxoverflow || 'hidden';
    }
    if ($global.pop[props.id].full == 2) {
        // 全屏模式
        tmpStyle = {
            transform: `translate(calc(-50% + ${
                window.innerWidth / 2
            }px),calc(-50% + ${window.innerHeight / 2}px))`,
            ...tmpStyle,
        };
    } else if ($global.pop[props.id].full == 1) {
        // 比例窗口模式
        tmpStyle = {
            transform: `translate(calc(-50% + ${
                $global?.sys?.zoomwidth / 2
            }px),calc(-50% + ${$global?.sys?.zoomheight / 2}px))`,
            ...tmpStyle,
        };
    } else if (pDomWH.w && pDomWH.h) {
        // 正常父级模式
        tmpStyle = {
            transform: `translate(calc(-50% + ${pDomWH.w / 2}px),calc(-50% + ${
                pDomWH.h / 2
            }px))`,
            ...tmpStyle,
        };
    } else {
        // 正常父级模式，未找到父级
        tmpStyle = {
            transform: `translate(calc(-50% + ${
                window.innerWidth / 2
            }px),calc(-50% + ${window.innerHeight / 2}px))`,
            ...tmpStyle,
        };
    }
    return tmpStyle;
});
</script>

<template>
    <div
        class="as-pop-area"
        :style="cmMainstyle"
        :id="'pop' + id"
        v-if="$global.pop[props.id].noresize"
    >
        <slot></slot>
    </div>
    <div
        class="as-pop-area"
        :style="cmMainstyle"
        :id="'pop' + id"
        v-popresizezoom="{ ujt, scale: 1 }"
        v-else-if="$global.pop[props.id].full == 2"
    >
        <slot></slot>
    </div>
    <div
        class="as-pop-area"
        :style="cmMainstyle"
        :id="'pop' + id"
        v-popresizezoom="{ ujt }"
        v-else
    >
        <slot></slot>
    </div>
</template>

<style scoped lang="scss">
.as-pop-area {
    pointer-events: auto;
    position: absolute;
    display: inline-flex;
    flex-direction: column;
    max-width: 100%;
    max-height: 100%;
    background-color: var(--ch0);
    border-radius: 18px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
</style>
